<!DOCTYPE html>
<!--
2017-1-2
-->
<html>
    <head>
        <title>Login</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/skin/scriptlib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="/skin/scriptlib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="/skin/theme/sueuix5/css/sueuix5.css" />
        <link rel="stylesheet" href="/skin/theme/sueuix5/css/login.css" />
        <style type="text/css">
            .form-group div { position: relative;}
            .form-group div label { position: absolute; right:20px; top:8px; color:#F00;}
        </style>
    </head>
    <body>
        <!--body_hd_include-->
        <script src="/skin/scriptlib/jquery/jquery-1.12.3.min.js"></script>
        <script src="/skin/scriptlib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="/skin/scriptlib/jquery-validation-1.15.0/dist/jquery.validate.min.js"></script>
        <script src="/skin/scriptlib/jquery-validation-1.15.0/dist/localization/messages_zh.min.js"></script>
        <!--/body_hd_include-->
        <div class="row" style="margin-top: 150px;">
            <div class="col-md-3 col-md-offset-5">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-lock"></span>用户登录
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" action="{:url('login')}" method="post">
                            <div class="form-group">
                                <label for="loginMail" class="col-sm-3 control-label">用户名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="loginName" placeholder="用户名" required="required" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="loginPass" class="col-sm-3 control-label">密码</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" name="loginPass" placeholder="密码" required="required" />
                                </div>
                            </div>
                            <div class="form-group last">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <button type="submit" class="btn btn-success btn-sm">登录系统</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="panel-footer">
                        忘记密码? <a>取回密码</a></div>
                </div>
            </div>
        </div>
        <!--dialog-->
        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">登录失败</h4>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--/dialog-->
        <script type="text/javascript">
            // 验证成功表单提交事件处理 2017-1-3
            $.validator.setDefaults({
                submitHandler: function () {
                    var $form = $('form');
                    var url = $form.attr('action');
                    var data = $form.serialize();
                    $.post(url, data, function (msg) {
                        console.log(msg);
                        if (msg.status) {
                            location.href = msg.info;
                        } else {
                            $('.modal-body').html(msg.info);
                            $('.modal').modal();
                        }
                    })
                }
            });
            // 表单验证规则 2017-1-3
            $("form").validate({
                rules: {
                    loginName: {
                        required: true,
                        minlength: 2
                    },
                    loginPass: {
                        required: true,
                        minlength: 3
                    },
                },
                messages: {
                    loginName: {
                        required: "请输入用户名",
                        minlength: "用户名至少2个字符"
                    },
                    loginPass: {
                        required: "请输入密码",
                        minlength: "密码至少3个字符"
                    },
                }
            });
        </script>
    </body>
</html>
